<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content"><text>秒杀券转账</text></block>
		</cu-custom>
		
		<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615358843_u9banc3z.jpg);background-size: 100% 100%;"> -->
			<view class="whole-box" style="background-color: #FB7483;">
			<view class="gold-black-box">
				
				<view class="top-box">
					<!-- <image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="top-box-content">
						<view class="note-price">
							<text class="note">可用秒杀券</text>
							<text class="price text-price">{{statistics && statistics.wholesale_coupon > 0 ? statistics.wholesale_coupon : 0}}</text>
							
						</view>
						<image class="icon-gold-tixian" src="@/static/icon-gold-money.png" mode="aspectFill"></image>
					</view>
				</view>
				
					<view class="my-data-box">
						<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
						<view class="my-data-box-content-inputbox">
							<view class="input-line">
								<text>接 收 人:</text>
								<input class="input-mobile" type="number" placeholder="请输入接收人的id" v-model="formData.mid" placeholder-class="my-input-holder"/>
							</view>
							<view class="input-line" >
								<text style="font-size: 12px;">秒杀券转出:</text>
								<input class="input-balance" type="digit" placeholder="请输入要转出的秒杀券" v-model="formData.money" placeholder-class="my-input-holder"/>
							</view>
							<view class="input-line">
								<text>交易密码:</text>
								<input class="input-password" v-model="password" type="password" placeholder="请输入交易密码" placeholder-class="my-input-holder"/>
								
							</view>
							<text style="margin-left: 25%;background-color: #ffffff;width: 100px;text-align: center;border-radius: 15px;height: 20px;font-size: 12px;line-height: 20px;color: #FB7483;" @tap="goPage('/pages/member/password2')">设置支付密码</text>
						</view>
					</view>
					
					<view class="my-data-box-submitbox">
						<!-- <image class="my-data-box-bg-submitbox" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
						<view class="my-data-box-content-submitbox">
							<textarea placeholder="仅自己可见的备注信息，最多100字，可不填" placeholder-class="my-input-holder" v-model="formData.remark"></textarea>
							<button @tap="showConf">确认转账</button>
						</view>
					</view>
			</view>
			<view class="cu-modal" :class="modalName=='Agreement'?'show':''">
				<view class="cu-dialog" style="background-color: #FB7483!important;">
					<!-- <image @click="modalName=''" src="../../../static/confrim.png" mode="scaleToFill" class="agreememt-bg"></image> -->
					
					<view class="agreememt-box">
						<view @click="modalName=''" class="close-bvo">X</view>
						<image :src="head" class="round" mode="widthFix" style="width: 60px;height: 60px;"></image>
						<view class="title">{{nickname ? nickname : ''}}</view>
						<view class="title title-con">请确认接收人信息</view>
						<view class="confirm-btn" @tap="onSubmit">我已确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				theme: this.$config.THEME(),
				statistics: null,
				member:null,
				loading: false,
				scrollHeight: 600,
				formData:{
					type:'money',
					mid:'',
					money:0,
					remark:''
				},
				checkLoading:false,
				password:'',
				modalName: '',
				head:'',
				nickname:''
			}
		},
		onLoad() {
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				// this.$nextTick((r) => {
				// 	uni.startPullDownRefresh({})
				// })
				this.$common.getMember().then((member)=>{
					this.member = member
					this.getTotal()
				})
			}
		},
		methods: {
			showConf(){
				let formData = this.formData
				
				if (formData.money <= 0) {
					this.$common.showError('请输入转赠秒杀券')
					return
				}
				if (!formData.mid.trim()) {
					this.$common.showError('请填写转赠的用户id')
					return
				}
				this.$http
					.get('integral_confirm', {mid:formData.mid})
					.then((response) => {
						console.log(response)
						if (response.data.data && response.data.data.id > 0) {
							this.head = response.data.data.head_portrait
							this.nickname = response.data.data.nickname
							this.modalName = 'Agreement'
						} else {
							this.$common.showError('该用户不存在')
							return
						}
						
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getTotal() {
				this.$http
					.get('integral_info', {})
					.then((response) => {
						this.statistics = response.data.data
					})
					.catch((response) => {
						console.log(response)
					})
			},
			
			onSubmit() {
				let formData = this.formData
				if (formData.money <= 0) {
					this.$common.showError('请输入转赠秒杀券')
					return
				}
				if (!formData.mid.trim()) {
					this.$common.showError('请填写转赠的用户id')
					return
				}
				if(this.checkLoading) return
				this.checkLoading = true
				uni.showLoading({
					title: '处理中'
				})
				this.$http.post('check_pay_pw', {
					password: this.password,
				}).then((response) => {
					this.$common.showSuccess('验证通过')
					uni.showLoading({
						title: '处理中'
					})
					this.$http.post('whole_integral', formData).then((response) => {
						uni.hideLoading()
						if (response.data.data.status == 200) {
							this.$common.showSuccess('转赠成功通过')
							this.modalName = ''
							this.getTotal()
						}
					}).catch((response) => {
						uni.hideLoading()
					this.checkLoading = false
					})
						
				this.checkLoading = false
				}).catch((response) => {
					uni.hideLoading()
				this.checkLoading = false
				})
			},
		},
	}
</script>

<style>
	.close-bvo{
		width: 100%;
		text-align: right;
		margin-right: -10px;
		font-weight: bold;
	}
	.cu-dialog{
		background: none!important;
	}
	.cu-modal .cu-dialog {
		width: 576rpx;
		height: 382rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.cu-dialog .agreememt-bg{
		width: 100%;
		height: 100%;
	}
	.cu-dialog .agreememt-box{
		width: 576rpx;
		height: 382rpx;
		padding: 0 26rpx;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.agreememt-box .title{
		font-size: 24rpx;
		font-weight: bold;
		color: #ffffff;
		margin-top: 20rpx;
	
	}
	.title-con{
		font-size: 28rpx!important;
	}
	.agreememt-box .content{
		margin-top: 60rpx;
		width: 100%;
		padding: 20rpx;
		height: 670rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		text-align: left;
		color: #303030;
		font-size: 24rpx;
	}
	.agreememt-box .radio-box{
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.radio-box .l-radio{
		font-size: 24rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.l-radio radio{
		transform:scale(0.5)
	}
	.agreememt-box .confirm-btn {
		margin-top: 20rpx;
		width: 310rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		text-align: center;
		background-color: #ffffff;
		font-size: 34rpx;
		font-weight: bold;
		color: #FB7483;
	}
</style>

<style>
	/* .text-box{
		width: 80%;
		background: #ffffff;
		border-radius: 10px;
		height: 450px;
	} */
	.whole-box{
		background-color: #333333;
		min-height: calc(100vh - 45px - 50rpx);
		padding: 25rpx 0;
	}
	.gold-black-box{
		padding: 25rpx 0;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 200rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.top-box-content .note-price{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.note-price .note{
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.note-price .price{
		font-size: 38rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.top-box-content .icon-gold-tixian{
		width: 65px;
		height: 50px;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 25rpx;
		width: 690rpx;
		height: 300rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content-inputbox{
		width: 690rpx;
		height: 300rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* align-items: center; */
		padding: 0 40rpx;
	}

	.my-data-box-content-inputbox .input-line{
		/* margin-top: 50rpx; */
		width: 100%;
		display: flex;
		align-items: center;
	}
	.input-line text{
		width: 120rpx;
		margin-right: 16rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.input-line input{
		margin-left: 15rpx;
		border-radius: 10rpx;
		height: 38rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		color: #000000;
		background-color: #FFFFFF;
	}
	.my-input-holder{
		font-size: 24rpx;
		color: #9B9B9B;
	}
	.input-line .input-mobile{
		width: 80%;
		background: #EEEEEE;
		height: 30px;
	}
	.input-line .input-balance{
		width: 80%;
		background: #EEEEEE;
		height: 30px;
	}
	.input-line .input-password{
		width: 80%;
		background: #EEEEEE;
		height: 30px;
	}
	
	.gold-black-box .my-data-box-submitbox{
		margin-top: 25rpx;
		width: 690rpx;
		height: 240rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.my-data-box-submitbox .my-data-box-bg-submitbox{
			width: 100%;
			height: 100%;
		}
	.my-data-box-submitbox .my-data-box-content-submitbox{
		width: 690rpx;
		height: 240rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* align-items: center; */
		padding: 0 40rpx;
	}
	.my-data-box-content-submitbox textarea{
		width: 100%;
		height: 88rpx;
		padding: 10rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #000000;
		background: #EEEEEE;
		border-radius: 10rpx;
	}
	.my-data-box-content-submitbox button{
		padding: 0;
		width: 224rpx;
		height: 50rpx;
		background-color: #ffffff;
		box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5);
		border-radius: 25rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #FB7483;
	}
	.my-data-box-content-submitbox button::after{
		border: 0;
	}
</style>